<!DOCTYPE html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>无标题文档</title>
    <link href="../../../static/css/style.css" rel="stylesheet" type="text/css"/>
    <script type="text/javascript" src="../../../static/js/jquery.js"></script>
    <style type="text/css">
        #birthday {
            padding-right: 0;
            height: 32px;
            line-height: 32px;
        }
    </style>
</head>
<script type="text/javascript">
    $(function () {
        //姓名正则
        function checkName(name) {
            let regex = /^[\u4E00-\u9FA5]{2,10}(·[\u4E00-\u9FA5]{2,10}){0,2}$/;
            //检验姓名
            let flag = true;
            if(flag){
                $("#uname").blur(function () {
                    $.ajax({
                        type: "post",//请求类型
                        url: "/users/userDetail",//请求的url
                        data: {uname: name},//请求参数
                        async: false,
                        dataType: "JSON",//ajax接口（请求url）返回的数据类型
                        success: function (rm) {//data：返回数据（json对象）
                            if (rm.status === 200) {//账号可用，正确提示
                                $("#reg_name").html(rm.msg);
                                flag = true;
                            } else if(name == rm.data.uname){//账号已存在，错误提示
                                $("#reg_name").html(rm.msg);
                                flag = false;
                            }
                        }
                    });
                })
            }
            return regex.test(name) & flag;
       }

        //密码正则
        function checkPassword(password) {
            let regex = /^([A-Za-z0-9]){2,10}$/;
            return regex.test(password);
        }

        //电话号码正则
        function checkTel(tel) {
            let regex = /^1([3-9])[0-9]{9}$/;
            return regex.test(tel);
        }


        $("#uname").focus(function () {
            $(this).css("border", "");
            $("#reg_name").html("");
        })

        $("#uname").blur(function () {
            if (!checkName($(this).val())) {
                $(this).css("border", "1px solid red");
            }
        })

        $("#upassword").focus(function () {
            $(this).css("border", "");
            $("#reg_password").html("");
        })

        $("#upassword").blur(function () {
            if (!checkPassword($(this).val())) {
                $("#reg_password").html("密码格式不正确(2-8位字母或数字)")
                $(this).css("border", "1px solid red");
            }
        })

        $("#utelephone").focus(function () {
            $(this).css("border", "");
            $("#reg_tel").html("");
        })

        $("#utelephone").blur(function () {
            if (!checkTel($(this).val())) {
                $("#reg_tel").html("手机号格式不正确")
                $(this).css("border", "1px solid red");
            }
        })

        $("#submit").click(function () {
            let flag = true;
            if (!checkName($("#uname").val())) {
                flag = false;
                $("#uname").css("border", "1px solid red");
            }
            if (!checkPassword($("#upassword").val())) {
                flag = false;
                $("#reg_password").html("密码格式不正确(2-8位字母或数字)")
                $("#upassword").css("border", "1px solid red");
            }
            if (!checkTel($("#utelephone").val())) {
                flag = false;
                $("#reg_tel").html("手机号格式不正确")
                $("#utelephone").css("border", "1px solid red");

            }


            if (flag) {
                $.ajax({
                    type: "post",
                    url: "/users/userAdd",
                    data: $("#Form").serializeArray(),
                    traditional: true,
                    async: true,
                    dataType: "JSON",
                    success: function () {
                        window.location.href = "findByPage";
                    },
                    error: function () {
                        alert("添加失败！");
                    }
                });
            }
        })
    })

    //部门选择框改变后
    function changeUserDept() {
        var jobDeptId = $("#deptId").val();
        // 职位查询
        $.ajax({
            type: "post",
            url: "/job/jobsList",
            data: {jobDeptId: jobDeptId},
            dataType: "JSON",
            success: function (rm) {
                var list = rm.data;
                var jobStr2 = '<option value="">请选择</option>';
                for (let j = 0; j < rm.data.length; j++) {
                    if (rm.data[j].jobState == 1 && jobDeptId == list[j].jobDeptId) {
                        jobStr2 += '<option value="' + list[j].jobId + '">' + list[j].jobName + '</option>';
                    } else {
                        jobStr2 += '';
                    }
                    $("#jobId").html(jobStr2);
                }
            },
            error: function (rm) {
                alert(rm.msg)
            }
        });
    }

    //加载部门职位下拉框
    $(function () {
        $.ajax({
            type: "post",
            url: "/dept/deptList",
            data: {},
            dataType: "JSON",
            success: function (rm) {
                let deptstr = '<option value="">请选择部门</option>';
                for (let i = 0; i < rm.data.length; i++) {
                    if (rm.data[i].deptState == 1) {
                        deptstr += '<option value="' + rm.data[i].deptId + '">' + rm.data[i].deptName + '</option>\n';
                    }
                }

                $("#deptId").html(deptstr);
            },
            error: function (rm) {
                alert(rm.msg)
            }
        });

        $.ajax({
            type: "post",
            url: "/job/jobList",
            data: {},
            dataType: "JSON",
            success: function (rm) {
                let jobStr = '<option value="">请选择职位</option>';
                for (let i = 0; i < rm.data.length; i++) {
                    jobStr += '<option value="' + rm.data[i].jobId + '">' + rm.data[i].jobName + '</option>\n';
                }
                $("#jobId").html(jobStr);
            },
            error: function (rm) {
                alert(rm.msg)
            }
        });

    })


</script>
<body>
<div class="place"><span>位置：</span>
    <ul class="placeul">
        <li><a href="findByPage">系统管理</a></li>
        <li><a href="findByPage">用户管理</a></li>
        <li><a href="userAdd">添加</a></li>
    </ul>
</div>
<form id="Form" onsubmit="return check()">
    <div class="formbody">
        <div class="formtitle"><span>员工信息</span></div>
        <ul class="forminfo">
            <li>
                <label>员工姓名</label>
                <input name="uname" type="text" class="dfinput" id="uname"/>
                <i id="reg_name">必填，2-10个汉字</i>
            </li>
            <li>
                <label>密码</label>
                <input name="upassword" type="password" class="dfinput" id="upassword"/>
                <i id-="reg_password">必填，2-10个字符</i>
            </li>
            <li>
                <label>性别</label>
                <cite>
                    <input name="sex" id="sex1" type="radio" value="1" checked="checked"/>男
                    &nbsp;&nbsp;&nbsp;&nbsp;
                    <input name="sex" id="sex2" type="radio" value="2"/>女
                </cite>
            </li>
            <li>
                <label>联系方式</label>
                <input name="utelephone" id="utelephone" type="text" class="dfinput"/>
                <i id="rel_tel">必填，11个数字</i>
            </li>
            <li>
                <label>出生年月</label>
                <input type="date" name="birthday" id="birthday" class="dfinput laydate-icon">
            </li>
            <li>
                <label>所属部门</label>
                <select name="deptId" class="dfselect" id="deptId" onchange="changeUserDept()">
                    <option value="">请选择部门</option>
                    <option value="">研发</option>
                    <option value="">销售</option>
                    <option value="">财务</option>
                </select>
            </li>
            <li>
                <label>职位</label>
                <select name="jobId" class="dfselect" id="jobId">
                    <option value="" selected="selected">经理</option>
                    <option value="">高级工程师</option>
                    <option value="">中级工程师</option>
                    <option value="">初级工程师</option>
                </select>
            </li>
            <li>
                <label>&nbsp;</label>
                <input id="submit" type="button" class="btn" value="确认保存"/>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <input id="back" type="button" class="btn" value="返回" onclick="window.history.go(-1);"/>
            </li>
        </ul>
    </div>
</form>
<script type="text/javascript">
    !function () {
        laydate.skin('molv');//切换皮肤，请查看skins下面皮肤库
        laydate({elem: '#birthday'});//绑定元素
    }();
</script>
</body>
